.error-mask {
  @apply w-full h-full absolute z-2 left-0 top-0;
  background-size: 100% 100%;

  &.not-vod-vip,
  &.vod-null {
    background-image: url('/images/not_vod_vip.webp');
  }

  &.not-live-vip {
    background-image: url('/images/not_live_vip.webp');
  }

  &.vod-play-error {
    background-image: url('/images/not_vod_vip.webp');
  }

  &.live-play-error {
    @apply flex flex-col items-center justify-center;
    background-image: url('/images/live_failed.webp');

    .img {
      @apply block;
    }

    .p1 {
      @apply block;
    }

    .p2 {
      @apply block;
    }
  }

  .img {
    @apply hidden;
    width: 6.25rem;
    height: 6.25rem;
  }

  .p1 {
    @apply hidden text-white-80 text-2xl leading-8 mt-5;
    margin-bottom: 0.625rem;
  }

  .p2 {
    @apply hidden text-white opacity-80 text-center text-lg leading-8;
    color: #999999;
  }
}

@media screen and (max-width: 767px) {
  .error-mask {
    .img {
      width: 3.75rem;
      height: 3.75rem;
    }

    .p1 {
      @apply text-lg mt-2 mb-2;
    }

    .p2 {
      @apply text-sm;
    }
  }
}
